<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="商品编辑" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view class="body-content-padding" :style="{marginTop:statusBarHeight+45+'px'}" style="padding-top: 10rpx;">
		<view class="item-bg">
			<picker mode="selector" :range="goodsTypeList" range-key="name" @change="changeGoodsType">
				<view class="flex-row justify-between">
					<view class="flex-row items-center">
						<text>商品类型</text>
						<text style="color: #D64444;">*</text>
					</view>
					
					<view class="flex-row items-center">
						<text style="color: #3274F9;">{{goodsType ? goodsType : '选择商品类型'}}</text>
						<uni-icons type="right" size="19"></uni-icons>
					</view>
				</view>
			</picker>
		</view>
		<view style="margin: 20rpx 42rpx;">
			<text>基本信息</text>
		</view>
		<view class="item-bg">
			<view class="flex-row items-center">
				<view class="flex-row items-center" style="width: 30%;">
					<text>商品标题</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<input style="width: 70%;" v-model="goods_title" placeholder="请输入商品标题(必填)" />
			</view>
			
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			
			<view class="flex-row items-center">
				<view class="flex-row items-center" style="width: 30%;">
					<text>商品副标题</text>	
				</view>
				<input style="width: 70%;" v-model="goods_subTitle" placeholder="请输入商品副标题" />
			</view>
			
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			
			<view class="flex-row justify-between items-center">
				<view class="flex-row items-center" style="width: 30%;">
					<text>商品封面</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<view class="cover-right">
					<uni-file-picker :auto-upload="false" limit="1" @select="coverSelect" @delete="coverDelete"/>
				</view>
			</view>
			
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			
			<view class="flex-col">
				<view class="flex-row justify-between">
					<text>商品轮播图</text>
					<text style="font-size: 25rpx;color: #999999;">建议大小：800px*800px</text>
				</view>
				<view style="margin-top: 30rpx;">
					<uni-file-picker :auto-upload="false" limit="6" @select="carouselSelect" @delete="carouselDelete"/>
				</view>
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			<view class="flex-col">
				<text>商品详情图</text>
				<view style="margin-top: 30rpx;">
					<uni-file-picker :auto-upload="false" limit="6" @select="detailImgSelect" @delete="detailImgDelete"/>
				</view>
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			<view class="flex-row items-center" style="height: 70rpx;" @click="goGoodsType">
				<view class="flex-row items-center" style="width: 30%;">
					<text>商品分类</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<view style="width: 70%;display: flex;flex-direction: row;justify-content: flex-end;">
					<view class="flex-row items-center">
						<text style="color: #3274F9;">{{goodTypeName ? goodTypeName : '选择商品分类'}}</text>
						<uni-icons type="right" size="19"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 42rpx;">
			<text>交易设置</text>
		</view>
		<view class="item-bg">
			<view class="flex-row items-center" style="height: 70rpx;" @click="goGoodsSpec">
				<view class="flex-row items-center" style="width: 30%;">
					<text>商品规格</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<view style="width: 70%;display: flex;flex-direction: row;justify-content: flex-end;">
					<view class="flex-row items-center">
						<text style="color: #3274F9;">去设置</text>
						<uni-icons type="right" size="19"></uni-icons>
					</view>
				</view>
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			<view class="flex-row items-center justify-between" style="height: 70rpx;">
				<view class="flex-row items-center" style="width: 30%;">
					<text>无理由退货</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<switch color="#3274F9" :checked="returnCheck" @change="switchChange"/>
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			<view class="flex-row items-center">
				<view class="flex-row items-center" style="width: 30%;">
					<text>温馨提示</text>	
				</view>
				<input style="width: 70%;" v-model="goods_tips" placeholder="请输入温馨提示" />
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			<view class="flex-row items-center">
				<view class="flex-row items-center" style="width: 30%;">
					<text>关联活动</text>	
				</view>
				<view style="width: 70%;display: flex;flex-direction: row;justify-content: flex-end;">
					<view class="flex-row items-center">
						<text style="color: #3274F9;">{{goodsAction ? goodsAction : '未选择'}}</text>
						<uni-icons type="right" size="19"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 20rpx 42rpx;">
			<text>物流设置</text>
		</view>
		
		<view class="item-bg">
			<view class="flex-row items-center justify-between" style="height: 70rpx;">
				<view class="flex-row items-center" style="width: 30%;">
					<text>是否包邮</text>	
					<text style="color: #D64444;">*</text>
				</view>
				<switch color="#3274F9" :checked="freeCheck" @change="freeSwitch"/>
			</view>
			<view class="line" style="margin-top: 30rpx;margin-bottom: 30rpx;"></view>
			
			
			<picker mode="selector" :range="shipTypeList" range-key="name" @change="changeShipType">
				<view class="flex-row justify-between">
					<view class="flex-row items-center" style="width: 30%;">
						<text>发货方式</text>	
						<text style="color: #D64444;">*</text>
					</view>
					<view style="width: 70%;display: flex;flex-direction: row;justify-content: flex-end;">
						<view class="flex-row items-center">
							<text>{{shipType ? shipType : '选择发货方式'}}</text>
							<uni-icons type="right" size="19"></uni-icons>
						</view>
					</view>
				</view>
			</picker>

			
		</view>
		
		
		
		<view class="btn">
			确认
		</view>
		
	</view>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				goodsType:'',
				goodsTypeList:[{
					name: '实体商品',
					id: 1
				},{
					name: '虚拟商品',
					id: 2
				}],
				shipTypeList:[
					{
						name: '物流',
						id: 1
					},{
						name: '无需配送',
						id: 2
					},
					{
						name: '配送',
						id: 3
					}
				],
				goods_title:'',
				goods_subTitle:'',
				coverFiles:[],
				carouselFiles:[],
				detailImgFiles:[],
				goodTypeName:'',
				returnCheck:false,
				freeCheck:false,
				goods_tips:'',
				goodsAction:'',
				shipType:''
				
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		onShow() {
			let that = this;
			uni.$once('backGoodsType',function(data){
				that.goodTypeName = data;
				console.log("新："+that.goodTypeName);
			})
		},
		methods:{
			///封面图
			coverSelect(e){
				console.log(e.tempFiles)
				
			},
			coverDelete(e){
				console.log(e)
			},
			///轮播图
			carouselSelect(e){
				console.log(e)
			},
			carouselDelete(e){
				console.log(e)
			},
			///详情图
			detailImgSelect(e){
				
			},
			detailImgDelete(e){
				console.log(e)
			},
			///去设置规格
			goGoodsSpec(){
				uni.navigateTo({
					url:'/pages/add_goods/spec_setting'
				})
			},
			switchChange(e){
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.returnCheck = e.detail.value
			},
			freeSwitch(e){
				this.freeCheck = e.detail.value
			},
			///商品类型选择框
			changeGoodsType(e){
				let index = e.detail.value
				this.goodsType = this.goodsTypeList[index].name
			},
			///发货方式选择
			changeShipType(e){
				let index = e.detail.value
				this.shipType = this.shipTypeList[index].name
			},
			///去选择商品分类
			goGoodsType(){
				uni.navigateTo({
					url:'/pages/add_goods/choose_goods_type'
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.item-bg{
	background-color: #fff;
	padding: 30rpx;
	border-radius: 10rpx;
	margin-top: 10rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	margin-bottom: 15rpx;
}
.cover-right{
	width: 70%;
	display: flex;
	justify-content: flex-end;
}
.btn{
	height: 80rpx;
	margin-top: 100rpx;
	margin-left: 50rpx;
	margin-right: 50rpx;
	background-color: #3274F9;
	border-radius: 45rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cover-right .uni-file-picker__container{
	justify-content: flex-end;
}
</style>
